<template>
    <div class="common-echart-box"  >
      <div class="common-echart" :id="id"></div>
    </div>
    
  </template>
  <script setup>
  import * as echarts from "echarts";
  import {onMounted, onUnmounted, reactive, watch} from "vue";
  import {ElMessage } from 'element-plus';
  //传入参数
  const props=defineProps({
    loading:{
      type:Boolean,
     },
    id:{
      type: String,
      default:''
    },
    title:{
      type: String,
      default:''
    },
    titleObj:{
      type: Object,
      default:null
    },
    grid:{
      type: Object,
      default:null
    },
    tooltip:{
      type: Object,
      default:null
    },
    xAxis:{
      type: Object,
      default:null
    },
    yAxis:{
      type: Object,
      default:null
    },
    xData:{
      type:Array,
      default:()=>{
        return []
      }
    },
    type:{
      type:String,
      default:"line"
    },
    series:{
      type:Array,
      default:null
    },
    dataset:{
      type:Object,
      default:null
    }
  })
  let myEchart = null
// 折线图所需要的数据
 //数据
 let dataS = reactive({
    XName : ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    data1 : [
    [123, 154, 234, 321, 120, 390, 634],
    [63, 194, 234, 321, 278, 110, 534],
    [53, 254, 234, 321, 118, 240, 434],
    [23, 354, 334, 221, 178, 190, 234],
    ],
    Line :["云篆山水路线", "昕博朗学校路线", "新华小学路线", "云锦五路路线"],
    img : [
    "image://",
    "image://",
    "image://",
    "image://",
    ],
    color : ["#00f8ff", "#00f15a", "#0696f9", "#dcf776"],
    //数据处理
    datas :[],
})
// 数据处理
const lineFn = ()=>{
    dataS.Line.map((item, index) => {
    dataS.datas.push({
    symbolSize: 150,
    symbol: dataS.img[index],
    name: item,
    type: "line",
    yAxisIndex: 1,
    data: dataS.data1[index],
    itemStyle: {
      normal: {
        borderWidth: 5,
        color: dataS.color[index],
      },
    },
  });
});
}
//   折线图
let lineChartOption = {
  backgroundColor: "#0e2147",
  grid: {
    left: "5%",
    top: "5%",
    bottom: "5%",
    right: "5%",
  },
  legend: {
    type: "scroll",
    data: lineFn(),
    itemWidth: 18,
    itemHeight: 12,
    textStyle: {
      color: "#00ffff",
      fontSize: 14,
    },
  },
  yAxis: [
    {
      type: "value",
      position: "right",
      splitLine: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
    },
    {
      type: "value",
      position: "left",
      nameTextStyle: {
        color: "#00FFFF",
      },
      splitLine: {
        lineStyle: {
          type: "dashed",
          color: "rgba(135,140,147,0.8)",
        },
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        formatter: "{value}",
        color: "#fff",
        fontSize: 14,
      },
    },
  ],
  xAxis: [
    {
      type: "category",
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "#6A989E",
        },
      },
      axisLabel: {
        inside: false,
        textStyle: {
          color: "#fff", // x轴颜色
          fontWeight: "normal",
          fontSize: "14",
          lineHeight: 22,
        },
      },
      data: dataS.XName,
    },
    {
      type: "category",
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      splitArea: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      //-----
      data: ["1月", "2月", "3月", "4月", "5月", "6月"],
    },
  ],
  series: dataS.datas,
}
  onMounted(()=>{
    lineFn()
    console.log(dataS.datas,'datas')
    if(!props.id){
        ElMessage.error('请传入echarts元素ID')
      return
    }
    let chartDom=document.getElementById(props.id)
    console.log(chartDom,'-------------')
    if(!myEchart){
      //(dom,theme)  purple-passion：主题
      myEchart=echarts.init(chartDom)
    }
    setOptions()
    //resize监听
    window.addEventListener('resize', resizeChange)
  })
  onUnmounted(() => {
    //图表销毁
    echarts.dispose;
    //注销监听
    window.removeEventListener('resize', resizeChange)
  });
  //图表数据填充
  const setOptions=()=>{
    //折线图-柱状图
    if(props.type=='line'||props.type=='bar'&&props.series){
      if(props.titleObj){
        lineChartOption.title=props.titleObj
      }
      myEchart.setOption(lineChartOption)
    }
  }
  const resizeChange=()=>{
    myEchart.resize()
  }
  watch(()=>props.series,(newValue, oldValue)=>{
    setOptions()
  })
  watch(()=>props.dataset,(newValue, oldValue)=>{
    setOptions()
  })
  </script>
  <style scoped>
  .common-echart-box{
    width:500px;
    height:500px;
  }
  .common-echart{
    width:100%;
    height:100%;
  }
  </style>